<template>
	<view>
		<view class="search">
			<image style="width: 34rpx;height: 34rpx;margin: 23rpx 0 0 30rpx;" src="../../static/users/search.png"
				mode=""></image>
			<input class="ipt_h" @input="searchval" placeholder="请输入搜索内容" type="text" value="" />
		</view>

		<view class="search_suo" @click="search">
			搜索
		</view>


		<u-index-list :scrollTop="scrollTop" @select="select">
			<view v-for="(item, index) in indexList" :key="index">
				<u-index-anchor  :index="item" />
				<view class="list-cell">
					11111
				</view>
				<view class="list-cell">
					列表2
				</view>
				<view class="list-cell">
					列表3
				</view>
			</view>
		</u-index-list>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				scrollTop: 0,
				indexList: ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S",
					"T", "U",
					"V", "W", "X", "Y", "Z"
				]
			}
		},
		methods: {
			onPageScroll(e) {
				this.scrollTop = e.scrollTop;
			},
			select(index){
				console.log(index);
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F2F4FA;
		position: absolute;
	}

	.search {
		margin: 40rpx 0 30rpx 30rpx;
		width: 610rpx;
		height: 80rpx;
		background: #FFFFFF;
		border-radius: 40rpx;
		position: relative;

		.ipt_h {
			width: 500rpx;
			position: absolute;
			top: 0;
			left: 90rpx;
			height: 80rpx;
		}

	}

	.search_suo {
		position: absolute;
		top: 62rpx;
		right: 30rpx;
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #181818;
	}




	.list-cell {
		display: flex;
		box-sizing: border-box;
		width: 100%;
		padding: 10px 24rpx;
		overflow: hidden;
		color: #323233;
		font-size: 14px;
		line-height: 24px;
		background-color: #fff;
	}
</style>
